<template>
  <div class="new-products-main base-main">
    <SwipeImg :imgList="imgList" :autoplay="autoPlay" />

    <div class="product-list-box">
      <div class="product-list pr bgcFFF">
        <p class="title color333 fs17">
          新品上架
          <span class="color999 fs12">新款商品 尽在其中</span>
        </p>

        <ul  v-if="dataList.length > 0">
          <PullUpReload
            :on-infinite-load="onInfiniteLoad"
            :parent-pull-up-state="infiniteLoadData.pullUpState">
            <li v-for="(item, index) in dataList" :key="index">
              <img :src="item.pic" alt="">
              <div class="product-msg inline-block">
                <p class="produc-name color45454D fs16 clamp1">
                  {{item.name}}
                </p>
                <p class="color999AA3 fs12" v-if="item.txt">
                  {{item.txt}}
                </p>
                <p v-else class="placeholder-txt">
                  占位符
                </p>
                <p class="fs12 color666" @click="toVipRule">
                  分享消费得
                  <span class="colorFF904A">￥10.00</span>
                  佣金
                </p>
                <p class="btn-box colorF54E4E pr">
                  <i class="fs12">￥</i>{{item.price}}
                  <span class="btn inline-block bg-buy-btn fs14 colorFFF flr" @click="toProductDetail(item.id)">立即查看</span>
                </p>
              </div>
            </li>
          </PullUpReload>
        </ul>
      </div>
    </div>

    <noneData :show="dataList.length <= 0" text="没有了"/>
  </div>
</template>

<script type="text/ecmascript-6">
  import SwipeImg from '../../components/SwipeImg'
  import PullUpReload from '../../components/PullUpReload.vue'
  import noneData from '../../components/noneData.vue'
  import { isArrayFn } from "../../assets/js/utils";
  import api from "../../http/api";

  import swiper1 from '../../assets/img/test1.jpg';
  import swiper2 from '../../assets/img/test2.jpg';
  export default {
    components: {
      SwipeImg,PullUpReload,noneData
    },
    data() {
      return {
        imgList:[
          swiper1,
          swiper2
        ],//轮播图数组
        autoPlay: 2000,//轮播图自动播放间隔
        dataList: [
          {
            id: 1,
            pic: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2944715889,1384189924&fm=173&app=49&f=JPEG?w=312&h=208&s=05525B859C1B2ACE2AA8C08203003083',
            name: '甲峰山·一品梅111',
            txt: '',
            price: '1588.00'
          },
          {
            id: 2,
            pic: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2944715889,1384189924&fm=173&app=49&f=JPEG?w=312&h=208&s=05525B859C1B2ACE2AA8C08203003083',
            name: '甲峰山·一品梅222',
            txt: '一品梅 红茶 茗茶单盒装',
            price: '15.00'
          },
          {
            id: 3,
            pic: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2944715889,1384189924&fm=173&app=49&f=JPEG?w=312&h=208&s=05525B859C1B2ACE2AA8C08203003083',
            name: '甲峰山·一品梅333',
            txt: '一品梅 红茶 茗茶单盒装',
            price: '15.00'
          },
          {
            id: 4,
            pic: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2944715889,1384189924&fm=173&app=49&f=JPEG?w=312&h=208&s=05525B859C1B2ACE2AA8C08203003083',
            name: '甲峰山·一品梅444',
            txt: '一品梅 红茶 茗茶单盒装',
            price: '15.00'
          },
          {
            id: 5,
            pic: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2944715889,1384189924&fm=173&app=49&f=JPEG?w=312&h=208&s=05525B859C1B2ACE2AA8C08203003083',
            name: '甲峰山·一品梅555',
            txt: '一品梅 红茶 茗茶单盒装',
            price: '15.00'
          },
          {
            id: 6,
            pic: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2944715889,1384189924&fm=173&app=49&f=JPEG?w=312&h=208&s=05525B859C1B2ACE2AA8C08203003083',
            name: '甲峰山·一品梅666',
            txt: '一品梅 红茶 茗茶单盒装',
            price: '15.00'
          },

        ],
        page: 1,
        // 上拉加载的设置
        infiniteLoadData: {
          initialShowNum: 8, // 初始显示多少条
          everyLoadingNum: 8, // 每次加载的个数
          pullUpState: 0, // 子组件的pullUpState状态
          pullUpList: [], // 上拉加载更多数据的数组
          showPullUpListLength: this.initialShowNum // 上拉加载后所展示的个数
        },
        isPost: false,//是否请求中
      }
    },
    methods: {
      // 获取活动文章列表
      initData(more) {
        if(this.isPost)return false
        this.$ajax(
          {
            url: api.activityList,
            method: "post",
          },
          {
            page: this.page,
            category_id: this.categoryId,
          }
        ).then(res => {
          let data = res.data.content;
          // data.status 活动状态 1 报名中，3 进行中，4已结束
          if (more) {
            if (isArrayFn(data) && data.length > 0) {
              this.dataList = this.dataList.concat(data);
            } else {
              this.page--;
              this.$toast("没有了");
              this.infiniteLoadData.pullUpState = 3
            }
          } else {
            this.infiniteLoadData.pullUpState = 0
            this.dataList = data;
          }
        });
      },
      // vip权益
      toVipRule() {
        this.$router.push({
          path:'vipRule',
        })
      },
      // 商品详情页
      toProductDetail(id) {
        this.$router.push({
          path:'productDetail',
          query:{id: id}
        })
      },
      // 上拉加载
      onInfiniteLoad(done) {
        if (this.infiniteLoadData.pullUpState === 0 && !this.isPost) {
          this.page++
          this.initData("more");
        }
        done();
      },
    },
  }
</script>

<style scoped lang="scss">
@import "../../assets/css/newProducts.scss";
</style>
